<button
  mat-icon-button
  [matMenuTriggerFor]="dropdown_globalNotifications"
  #notificationMenuTrigger="matMenuTrigger"
  (menuOpened)="menuOpened()"
  [matBadge]="notificationLength"
  [disabled]="!notificationLength"
  class="nav-white">
  <mat-icon>notifications</mat-icon>
</button>
<mat-menu
  #dropdown_globalNotifications="matMenu"
  xPosition="before"
  class="global-notification-list">
  <ng-container *ngFor="let notification of globalNotifications">
    <div
      *ngIf="!notification.accepted"
      class="d-flex align-items-center justify-content-between pl-0"
      (click)="$event.stopPropagation()"
      mat-menu-item>
      <em
        class="fa fa-circle mx-3"
        [class]="'text-' + notification.labelClass"></em>
      <ng-container *ngIf="isRbacNotif(notification.name); else globalNotif">
        <span
          class="notification-message"
          [class]="notification.unClamped ? 'unclamped' : 'clamped'"
          [id]="notification.name"
          (click)="toggleClamp(notification)">
          <strong>{{ getRbacTitle(notification.name) }}</strong>
          <br />
          {{ notification.message }}
        </span>
      </ng-container>
      <ng-template #globalNotif>
        <span
          class="notification-message"
          [class]="notification.unClamped ? 'unclamped' : 'clamped'"
          [id]="notification.name"
          (click)="toggleClamp(notification)">
          {{ notification.message }}
          <a [href]="notification.link" (click)="closeMenu()">
            <em class="eos-icons icon-12">launch</em>
          </a>
        </span>
      </ng-template>
      <em class="ml-3 eos-icons icon-18" (click)="accept(notification, $event)"
        >check_circle</em
      >
    </div>
  </ng-container>
</mat-menu>
